<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/login.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .blur{
            -webkit-filter: blur(20px);
            -moz-filter:blur(20px);
            -ms-filter: blur(20px);
            filter:blur(20px);
        }
        .bg{
            height: 100%;
            width: 100%;
            background-image: url(../../img/login_bg02.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
        }
        .wrap {
            height: 100%;
            width: 100%;
            background-color: rgba(0,0,0,0);
            position: absolute;
        }

        .wrap .logGet {
            height: 320px;
            width: 320px;
            position: absolute;
            background-color: rgba(100,100,100,0.2);
            bottom: 50%;
            left: 50%;
            margin-bottom: -160px;
            margin-left: -160px;
        }

        .logC button {
            width: 100%;
            height: 45px;
            background-color: #01AAED;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .logGet .logD.logDtip .p1 {
            display: inline-block;
            font-size: 24px;
            margin-top: 15px;
            margin-bottom: 5px;
            /*color: #FFFFFF;*/
            width: 86%;
        }

        .wrap .logGet .logD.logDtip {
            width: 86%;
            /*border-bottom: 1px solid #01AAED;*/
            margin-bottom: 10px;
            margin-top: 0px;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
        }

        .logGet .lgD img {
            position: absolute;
            top: 12px;
            left: 8px;
        }

        .logGet .lgD input {
            width: 98%;
            height: 42px;
            text-indent: 3rem;
        }

        .wrap .logGet .lgD {
            width: 86%;
            position: relative;
            margin-bottom: 20px;
            margin-top: 20px;
            margin-right: auto;
            margin-left: auto;
        }

        .wrap .logGet .logC {
            width: 86%;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }

        .btn1 {
            cursor: pointer;
            font-size: 14px;
            margin-left: 15px;
        }

    </style>
    <!--可以在收藏夹中显示出图标-->
    <link rel="Bookmark" type="image/png" href="../../img/logo.png" />
    <!--可以在地址栏中显示出图标-->
    <link rel="icon" type="image/png" href="../../img/logo.png" />
    <link rel="shortcut icon" type="image/png" href="../../img/logo.png" />
</head>

<body class="body">
<div class="bg blur"></div>
<div class="wrap" id="wrap">
    <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
            <p class="p1">后台登录</p>
        </div>
        <!-- 输入框 -->
        <div class="lgD">
            <img src="../../img/user.png" width="20" height="20" alt=""/>
            <input type="text" id="user_name"
                   placeholder="用户名" />
        </div>
        <div class="lgD" style="margin-bottom: 15px">
            <img src="../../img/pwd.png" width="20" height="20" alt=""/>
            <input type="password" id="user_pwd"
                   placeholder="密码" />
        </div>
        <div class="lgD" style="margin-top: 0px;margin-bottom: 8px;margin-left: 22px">
            <span class="btn1" id="reset-password">忘记密码</span>
            <span style="margin-left: 10px;font-size: 14px;color: red;display: none" id="err-info"></span>
        </div>

        <div class="logC">
            <button class="layui-btn layui-btn-normal" style="height: 45px;font-size: 18px" id="login">登 录</button>
        </div>
    </div>
</div>



</body>
<script src="../../lib/jquery.min.js"></script>
<script src="../../js/const.js"></script>
<script src="../../js/util.js"></script>
<script>
    $("#reset-password").click(function () {
        window.location="../reset_password.html";
    });
    $("#login").click(function () {
        var user_name = $("#user_name").val();
        var user_pwd = $("#user_pwd").val();
        var data = {};
        data.user_name = user_name;
        data.user_pwd = user_pwd;
        data.is_admin = 0;
        console.log(data);
        util.sendPOST("/login", data, function (reponse) {
            console.log(reponse);
            if (reponse.status){
                $("#err-info").html("");
                util.setLocalStorage("user",reponse.data);
                window.location="./index.html";
            }else{
                $("#err-info").html("用户名或密码不正确！");
                $("#err-info").show();
            }
        }, function () {
            $("#err-info").html("服务端错误！");
            $("#err-info").show();
        });
    });
</script>
</html>
